شرح دورة أساسيات EJS

EJS (Embedded JavaScript Templates) هي لغة قوالب تُستخدم مع Node.js لإنشاء صفحات HTML ديناميكية. تسمح لك بدمج JavaScript مباشرة داخل HTML، مما يجعلها أداة قوية لبناء تطبيقات الويب.

الدرس الأول: تثبيت EJS والبدء

شرح مفصل:
  • تثبيت EJS: يمكنك تثبيت EJS باستخدام npm عبر الأمر التالي:
    npm install ejs
  • إنشاء ملف EJS: قم بإنشاء ملف بامتداد `.ejs`، على سبيل المثال `index.ejs`.
  • ربط EJS مع Express: يمكنك استخدام EJS مع إطار عمل Express.js لإنشاء تطبيقات ويب.
    const express = require('express'); const app = express(); app.set('view engine', 'ejs'); app.get('/', (req, res) => { res.render('index', { title: 'مرحبًا بكم' }); }); app.listen(3000, () => { console.log('الخادم يعمل على http://localhost:3000'); });

الدرس الثاني: بناء القوالب الأساسية

شرح مفصل:
  • إنشاء قالب بسيط: يمكنك إنشاء قالب EJS بسيط باستخدام العلامات الأساسية.
    <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <title><%= title %></title> </head> <body> <h1><%= title %></h1> <p>مرحبًا بكم في موقعنا!</p> </body> </html>
  • تمرير البيانات: يمكنك تمرير البيانات من الخادم إلى القالب باستخدام الكائن `res.render`.
    app.get('/', (req, res) => { res.render('index', { title: 'مرحبًا بكم' }); });

الدرس الثالث: استخدام العلامات الخاصة بـ EJS

شرح مفصل:
  • علامة <%= %>: تُستخدم لعرض القيم في القالب.
    <h1><%= title %></h1>
  • علامة <% %>: تُستخدم لتنفيذ كود JavaScript دون عرض الناتج.
    <% if (user) { %> <p>مرحبًا، <%= user.name %></p> <% } %>
  • علامة <%- %>: تُستخدم لعرض HTML دون تحويله إلى نصوص آمنة.
    <%- someHTML %>

الدرس الرابع: التضمين (Includes) في EJS

شرح مفصل:
  • تضمين ملفات EJS: يمكنك تقسيم القوالب إلى أجزاء صغيرة وإعادة استخدامها.
    <%- include('header') %> <h1>مرحبًا بكم</h1> <%- include('footer') %>
  • تمرير البيانات إلى الملفات المضمنة: يمكنك تمرير البيانات إلى الملفات المضمنة.
    <%- include('header', { title: 'مرحبًا بكم' }) %>

الدرس الخامس: التكرار والشروط في EJS

شرح مفصل:
  • استخدام الحلقات: يمكنك استخدام الحلقات لعرض قوائم البيانات.
    <ul> <% users.forEach(user => { %> <li><%= user.name %></li> <% }) %> </ul>
  • استخدام الشروط: يمكنك استخدام الشروط لعرض محتوى بناءً على شروط معينة.
    <% if (isLoggedIn) { %> <p>مرحبًا، <%= user.name %></p> <% } else { %> <p>يرجى تسجيل الدخول</p> <% } %>

الدرس السادس: استخدام التخطيطات (Layouts)

شرح مفصل:
  • إنشاء تخطيط: يمكنك إنشاء تخطيط رئيسي وإعادة استخدامه في الصفحات الأخرى.
    <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <title><%= title %></title> </head> <body> <%- include('header') %> <%- body %> <%- include('footer') %> </body> </html>
  • استخدام التخطيط: يمكنك استخدام التخطيط في الصفحات الأخرى.
    <% layout('layout') %> <h1>مرحبًا بكم</h1>

الدرس السابع: التعامل مع النماذج (Forms)

شرح مفصل:
  • إنشاء نموذج: يمكنك إنشاء نماذج باستخدام HTML وجمع البيانات باستخدام Express.
    <form action="/submit" method="POST"> <input type="text" name="username" placeholder="اسم المستخدم"> <button type="submit">إرسال</button> </form>
  • معالجة البيانات: يمكنك معالجة البيانات المرسلة من النموذج في Express.
    app.post('/submit', (req, res) => { const username = req.body.username; res.send(`مرحبًا، ${username}`); });

الدرس الثامن: استخدام Middleware مع EJS

شرح مفصل:
  • تثبيت Middleware: يمكنك استخدام Middleware مثل `body-parser` لمعالجة البيانات.
    const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true }));
  • تمرير البيانات إلى القوالب: يمكنك تمرير البيانات من Middleware إلى القوالب.
    app.use((req, res, next) => { res.locals.user = req.user; next(); });

الدرس التاسع: أفضل الممارسات

شرح مفصل:
  • تنظيم القوالب: قسّم القوالب إلى أجزاء صغيرة لإعادة الاستخدام.
  • استخدام التخطيطات: استخدم التخطيطات لتجنب تكرار الكود.
  • اختبار القوالب: تأكد من أن القوالب تعمل بشكل صحيح مع البيانات المختلفة.

الدرس العاشر: مشروع عملي

شرح مفصل:
  • بناء تطبيق To-Do List:
    1. إنشاء واجهة مستخدم بسيطة باستخدام EJS.
    2. إضافة وظائف لإضافة وحذف المهام.
    3. ربط التطبيق مع قاعدة بيانات بسيطة.